(function () {
  particlesJS('particles-js',
    {
      "particles": {
        "number": {
          "value": 30,
          "density": {
            "enable": true,
            "value_area": 800
          }
        },
        "color": {
          "value": ["#fe6913", "#02b7ee", "#11305f", "#dcd203"]
        },
        "shape": {
          "type": "circle",
          "stroke": {
            "width": 10,
            "color": "#000000"
          },
          "polygon": {
            "nb_sides": 5
          },
          "image": {
            "src": "img/github.svg",
            "width": 100,
            "height": 100
          }
        },
        "opacity": {
          "value": 1,
          "random": true,
          "anim": {
            "enable": true,
            "speed": 1,
            "opacity_min": 0.3,
            "sync": false
          }
        },
        "size": {
          "value": 10,
          "random": true,
          "anim": {
            "enable": false,
            "speed": 40,
            "size_min": 5,
            "sync": false
          }
        },
        "line_linked": {
          "enable": true,
          "distance": 300,
          "color": "#48525d",
          "opacity": 1,
          "width": 1
        },
        "move": {
          "enable": true,
          "speed": 3,
          "direction": "none",
          "random": false,
          "straight": false,
          "out_mode": "out",
          "attract": {
            "enable": false,
            "rotateX": 600,
            "rotateY": 1200
          }
        }
      },
      "interactivity": {
        "detect_on": "canvas",
        "es": {
          "onhover": {
            "enable": true,
            "mode": "grab"
          },
          "onclick": {
            "enable": true,
            "mode": "repulse"
          },
          "resize": true
        },
        "modes": {
          "grab": {
            "distance": 400,
            "line_linked": {
              "opacity": 1
            }
          },
          "bubble": {
            "distance": 400,
            "size": 40,
            "duration": 2,
            "opacity": 8,
            "speed": 3
          },
          "repulse": {
            "distance": 200
          },
          "push": {
            "particles_nb": 4
          },
          "remove": {
            "particles_nb": 2
          }
        }
      },
      "retina_detect": true,
      "config_demo": {
        "hide_card": false,
        "background_color": "#b61924",
        "background_image": "",
        "background_position": "50% 50%",
        "background_repeat": "no-repeat",
        "background_size": "cover"
      }
    }
  );
})();
(function () {
  // window.onload = function () {
  const data = [
    {
      cover: './images/portfolios/1.png',
      content: 'ALL,CARD',
      title: '表单验证',
      link: './show/1-表单验证.html',
      height: 660
    }, {
      cover: './images/portfolios/2.png',
      content: 'ALL,APP',
      title: '留言板',
      link: './show/2-留言板.html',
      height: 330
    },
    {
      cover: './images/portfolios/3.png',
      content: 'ALL,CARD',
      title: 'sidebar',
      link: './show/3-sidebar.html',
      height: 745
    },
    {
      cover: './images/portfolios/5.png',
      content: 'ALL,APP',
      title: '购物车',
      link: './show/5-购物车.html',
      height: 745
    },
    {
      cover: './images/portfolios/4.png',
      content: 'ALL,APP',
      title: '选项卡',
      link: './show/4-选项卡.html',
      height: 330
    },
    {
      cover: './images/portfolios/6.png',
      content: 'ALL,CARD',
      title: '电话本',
      link: './show/6-电话本.html',
      height: 330
    },
    {
      cover: './images/portfolios/7.png',
      content: 'ALL,WEB',
      title: '小方块移动',
      link: './show/7-小方块移动.html',
      height: 660
    },
    {
      cover: './images/portfolios/8.png',
      content: 'ALL,WEB',
      title: '小方块阵列',
      link: './show/8-小方块阵列.html',
      height: 330
    },
    {
      cover: './images/portfolios/9.png',
      content: 'ALL,WEB',
      title: '随机背景颜色',
      link: './show/19-随机背景颜色.html',
      height: 745
    },
    {
      cover: './images/portfolios/10.png',
      content: 'ALL,CARD',
      title: '无限滚动&回到顶部',
      link: './show/10-无限滚动&回到顶部.html',
      height: 330
    },
    {
      cover: './images/portfolios/11.png',
      content: 'ALL,CARD',
      title: '楼层导航',
      link: './show/14-楼层导航.html',
      height: 745
    },
    {
      cover: './images/portfolios/12.png',
      content: 'ALL,CARD',
      title: '淡入淡出',
      link: './show/18-淡入淡出.html',
      height: 330
    },
  ];

  const cols = document.querySelectorAll('.waterfall-wrap ul')
  let text = document.querySelector('.text')
  let cleanButton = document.querySelector('.clean')

  for (let i = 0; i < cols.length; i++) {
    cols[i].height = 0
  }
  data.forEach((item, i) => {
    const minCol = getMinCol()
    minCol.insertAdjacentHTML('beforeend', `
    <li>
      <img src="${item.cover}" alt=""/>
      <div class="imgs-info flex">
        <a href=${item.link} class='btn'>${item.title}</a>
        <a href=${item.link} class='link'><img src="./images/portfolios/链接2@2x.png" alt=""></i></a>  
      </div>
    </li>
      `)
    minCol.height += item.height + 43
  })


  text.addEventListener('keyup', function (e) {
    if (
      (e.keyCode >= 48 || e.keyCode <= 57) ||
      (e.keyCode >= 65 || e.keyCode <= 90) ||
      (e.keyCode === 8)
    ) {
      const result = data.filter(function (item) {
        const reg = new RegExp(text.value, 'i');
        if (item.title.search(reg) != -1) {
          return item;
        }
      });
      searchBox(result)
      if (text.value.trim() === '') {
        cleanButton.style.display = 'none'
      }
      else {
        cleanButton.style.display = 'block'
      }
    }
  }, false)

  cleanButton.onclick = function () {
    searchBox(data)
    text.value = '';
    cleanButton.style.display = 'none'
  }

  //标签绑定
  let tags = document.querySelectorAll('.type-tags li')
  console.log(tags);
  tags.forEach((tag) => {
    tag.addEventListener('click', function () {
      searchTag('ALL')
      searchTag('APP')
      searchTag('CARD')
      searchTag('WEB')
    })
    // 便签过滤
    function searchTag(Tag) {
      for (let i = 0; i < tags.length; i++) {
        tags[i].className = ''
      }
      tag.className = 'active'
      if (tag.innerHTML == Tag) {
        const resultTag = data.filter(function (item) {
          const reg = new RegExp(Tag);
          if (item.content.search(reg) != -1) {
            return item;
          }
        })
        searchBox(resultTag)
      }
    }
  })

  function searchBox(arr) {
    for (let i = 0; i < cols.length; i++) {
      cols[i].height = 0
      cols[i].innerHTML = '';
    }
    arr.forEach((item, i) => {
      const minCol = getMinCol()
      minCol.insertAdjacentHTML('beforeend', `
      <li>
        <img src="${item.cover}" alt=""/>
        <div class="imgs-info flex">
          <a href=${item.link} class='btn'>${item.title}</a>
          <a href=${item.link} class='link'><img src="./images/portfolios/链接2@2x.png" alt=""></i></a>  
        </div>
      </li>
      `)
      minCol.height += item.height + 43
    })
  }

  function getMinCol() {
    let minCol = cols[0]
    for (let i = 1; i < cols.length; i++) {
      if (cols[i].height < minCol.height) minCol = cols[i]
    }
    return minCol
  }

})();